<template>
  <div>
    <topUp></topUp>
    <div id="home">
      <left></left>
      <div class="main">
        <div class="main-left nui-scroll">
          <mainLeft ref="mainLeft"></mainLeft>
        </div>
        <div class="main-center nui-scroll">
          <mainCenter></mainCenter>
        </div>
        <div class="main-right nui-scroll">
          <mainRight></mainRight>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topUp from "@/components/topUp/topUp";
import left from "@/components/left/left";
import mainLeft from "@/components/mainLeft/mainLeft";
import mainCenter from "@/components/mainCenter/mainCenter";
import mainRight from "@/components/mainRight/mainRight";
import { mapState, mapMutations } from "vuex";
export default {
  name: "home",
  data() {
    return {};
  },
  components: {
    topUp,
    mainLeft,
    mainCenter,
    mainRight,
    left,
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
  },
  methods: {
   
  },
};
</script>


<style lang="less" scoped>
@import '~@/assets/css/base.less';
#home {
  display: flex;
  width: 100%;
  .main {
    display: flex;
    width: 100%;
    border-radius: 5px 0 0 0 ;
    background-color: #f4f6f8;
    overflow: hidden;
    > div {
      height: calc(100vh - 60px);
      overflow-y: scroll;
    }
    .main-left {
      width: 306px;
      background-color: #fff;
    }
    .main-center {
      width: calc(100% - 846px);
    }
    .main-right {
      width: 540px;
      background-color: #fff;
    }
  }
}
</style>
